<template>
	<view class="content">
		<view class="top">
			<view class="top_box">
				<view class="app-title ac">
					<view class="fr" @click="jumpUrl">
						<image class="more" src="/static/img/ip-settin.png"></image>
					</view>
				</view>
				<view class="box">
					<image class="logo" src="/static/img/new/casco.png" v-if="showLogo"></image>
					<view class="title">
						<view> 数字化运维系统 </view>
					</view>
					<!-- <image class='title' src='/static/img/new/智能运维系统.png'></image> -->
					<image class="round" src="/static/img/new/4.png"></image>
					<image class="round2" src="/static/img/new/3.png"></image>
					<image class="line" src="/static/img/new/line.png"></image>
				</view>
			</view>
		</view>
		<view class="bottom">
			<view class="box">
				<text class="bottom_title"> 卡斯柯*提供技术支持 </text>
			</view>
			<view class="round">
				<image src="/static/img/new/1.png"></image>
			</view>
		</view>
		<view class="login">
			<!-- <image class="logo" src="/static/img/login.png" mode="aspectFill"></image> -->
			<input class="login-input" v-model="account" />
			<input class="login-input" type="text" password="true" v-model="password" />
			<!-- <view class="forget"><checkbox class="checkbox"></checkbox>忘记密码</view> -->

			<button class="default-btn" @click="login"><b>登录</b></button>
			<button class="default-btn" @click="loginTest"><b>离线登录</b></button>
			<!-- <button class="default-btn" @click="testH5"><b>测试</b></button> -->
		</view>
	</view>
</template>

<script>
	import {
		LOGINCONTROLLER,
		DICCONTROLLER,
		LINECONTROLLER,
		ORGCONTROLLER,
	} from "../../../api/sys";

	import {
		md5
	} from "../../../utils/secret.js"
	import {
		encrypt,
		decrypt
	} from "../../../utils/jsencrypt.js";
	export default {
		data() {
			return {
				account: "",
				password: "",
				showLogo: "",
			};
		},
		// beforeCreate() {
		// 	document.querySelector('body').setAttribute('style', "background:url('/static/img/login-bg.png') no-repeat")
		// },
		// beforeDestroy() {
		//     document.body.removeAttribute('style')
		// },
		onShow() {
			console.log("showLOGO", this.showLogo)
			// this.showLogo = this.$store.state.appServer.showLogo;
			this.setUserNameOrPassWord();
		},
		onBackPress(e) {
			uni.showModal({
				title: "提示",
				content: "是否要退出应用程序？",
				success: function(res) {
					if (res.confirm) {
						plus.runtime.quit();
					} else if (res.cancel) {}
				},
			});
			return true; //表示禁止默认返回
		},
		created() {
			console.log("showLOGO1", this.showLogo)
			this.getDicData1()
		},
		mounted() {
			let self =this;
			uni.getSystemInfo({
				success(res) {
					self.$store.commit("setData", {
						screenHeight: res.screenHeight,
						screenWidth: res.screenWidth
					})
				}
			})
		},
		methods: {
			async getDicData1() {
				const dicData = await this.fetch(
					"post",
					this.$store.state.baseUrl + DICCONTROLLER.DICLISTSBYDICTYPE, {
						dicClass: "appServer", // app服务 appServer
					}
				);
				dicData &&
					dicData.data &&
					Array.isArray(dicData.data) &&
					dicData.data.forEach((item) => {
						this.$store.state.appServer[item.code] = item.value;
					});
				this.showLogo = parseInt(this.$store.state.appServer.showLogo) ? true : false;
				console.log("showLOGO2", this.showLogo)
			},
			setUserNameOrPassWord() {
				let userName = uni.getStorageSync("username");
				let passWord = uni.getStorageSync("password");
				if (userName && passWord) {
					this.account = userName;
					this.password = decrypt(passWord);
				}
				console.log("userName", userName, passWord);
			},
			loginTest() {
				uni.navigateTo({
					url: "/pages/luckysheet/luckysheet",
				});
			},
			testH5() {
				// uni.navigateTo({
				// 	url: "/pages/previewVideo/previewVideo?url=" +
				// 		"http://192.168.0.192:8383/v.mp4",
				// });
			uni.navigateTo({
				url: "/pages/testPage/testPage",
			});
			},
			async getDicData() {
				// 获取报警等级
				const alarmLevels = await this.fetch(
					"post",
					this.$store.state.baseUrl + DICCONTROLLER.DICLISTSBYDICTYPE, {
						dicClass: "alarm_level", // 报警等级
					},
					false
				);
				this.$store.commit("setData", {
					alarmLevels: (alarmLevels?.data.map &&
						alarmLevels?.data.map((item) => ({
							code: item.code,
							value: item.value,
							props: (item.remark &&
								typeof item.remark == "object" &&
								JSON.parse(item.remark)) || {},
						}))) || [],
				});
				// 获取线路
				const lineList = await this.fetch(
					"get",
					this.$store.state.baseUrl + LINECONTROLLER.ALLLINES
				);
				this.$store.commit("setData", {
					lineTree: lineList.data,
				});
				// 获取机构
				const orglist = await this.fetch(
					"get",
					this.$store.state.baseUrl + ORGCONTROLLER.ALLORGS
				);
				// { orgnum: this.userInfo?.departid }
				if (orglist.success) {
					this.$store.commit("setData", {
						reeByOrgnum: orglist.data,
					});
				}
				// 获取工单类别
				const res = await this.fetch(
					"post",
					this.$store.state.baseUrl + DICCONTROLLER.DICLISTSBYDICTYPE, {
						dicClass: "workorder_type", // 工单类别
					},
					false
				);
				this.$store.commit("setData", {
					workOrderType: res?.data,
				});
				// 获取专业
				const res1 = await this.fetch(
					"post",
					this.$store.state.baseUrl + DICCONTROLLER.DICLISTSBYDICTYPE, {
						dicClass: "profession_type", // 专业分类
					},
					false
				);
				this.$store.commit("setData", {
					workProfession: res1?.data,
				});

				// 获取状态
				const res4 = await this.fetch(
					"post",
					this.$store.state.baseUrl + DICCONTROLLER.DICLISTSBYDICTYPE, {
						dicClass: "workorder_status", // 工单状态
					},
					false
				);
				this.$store.commit("setData", {
					workOrderState: res4?.data,
				});
				const res5 = await this.fetch(
					"post",
					this.$store.state.baseUrl + DICCONTROLLER.DICLISTSBYDICTYPE, {
						dicClass: "application_type", // 申请类别
					},
					false
				);
				this.$store.commit("setData", {
					applicationType: res5?.data,
				});

				const res6 = await this.fetch(
					"post",
					this.$store.state.baseUrl + DICCONTROLLER.DICLISTSBYDICTYPE, {
						dicClass: "job_type", // 作业类别
					},
					false
				);
				this.$store.commit("setData", {
					workType: res6?.data,
				});
				const res7 = await this.fetch(
					"post",
					this.$store.state.baseUrl + DICCONTROLLER.DICLISTSBYDICTYPE, {
						dicClass: "constr_area", // 施工区域
					},
					false
				);
				this.$store.commit("setData", {
					workArea: res7?.data,
				});
				const res8 = await this.fetch(
					"post",
					this.$store.state.baseUrl + DICCONTROLLER.DICLISTSBYDICTYPE, {
						dicClass: "故障现象",
					},
					false
				);

			},
			jumpUrl() {
				uni.navigateTo({
					url: "/pages/system/setting/index",
				});
			},
			login() {
				if (this.account == "" || this.password == "")
					return uni.showToast({
						title: "请输入用户名和密码",
						icon: "none",
					});
				let obj = {
					username: this.account,
					// password: this.password,
					password: md5(this.password, 32)
				};
				console.log("登录用户名密码", obj);
				this.fetch(
					"POST",
					this.$store.state.baseUrl + LOGINCONTROLLER.LOGIN,
					obj,
					"",
					false
				).then((res) => {
					if (res.success) {
						uni.setStorageSync("token", res.data);
						this.$store.commit("setUser", {
							token: res.data,
						});
						setTimeout(() => {
							this.fetch(
								"GET",
								this.$store.state.baseUrl + LOGINCONTROLLER.LOGINFO, {
									type: "app",
								},
								"",
								true
							).then((res) => {
								uni.setStorageSync("baseUrl", this.$store.state.baseUrl);
								if (res.success && res.data) {
									uni.showToast({
										title: "登录成功",
										icon: "none",
									});
									uni.setStorageSync("userId", res.data.id);
									uni.setStorageSync("username", res.data.name);
									uni.setStorageSync("password", encrypt(this.password));
									uni.setStorageSync("departid", res.data.org.orgQueryNum);
									uni.setStorageSync("userInfo", JSON.stringify(res.data));
									this.$store.state.userInfo = res.data;
									setTimeout(() => {
										this.getDicData(); //字典数据
										this.$store.state.websocketFromLogin =
											"login"; // TODO: 这是啥意思
										uni.navigateTo({
											url: "/pages/index/index",
										});
									}, 500);
								} else {
									uni.showToast({
										title: res.message.substring(0, 7) + " !",
										icon: "none",
									});
								}
							});
						}, 500);
					} else {
						uni.showToast({
							title: res.message,
							icon: "none",
						});
					}

				});
			},
			outlineLogin() {
				uni.showToast({
					title: "登录成功",
					icon: "none",
				});
				uni.setStorageSync("userId", "111111111");
				uni.setStorageSync("username", "outline user");
				uni.setStorageSync("departid", "01");
				uni.navigateTo({
					url: "/pages/luckysheet/luckysheet",
				});
			},
		},
	};
</script>

<style scoped lang="less">
	.bottom_title {
		margin-bottom: 10vh;
		font-family: 思源黑体;
		font-size: 14px;
		color: #ffffff;
	}

	.round {
		float: right;
		position: relative;
		width: 140px;
		height: 70px;
		top: -100px;
		right: 0;

		uni-image {
			height: 100%;
		}
	}

	.top {
		.top_box {
			height: 100%;
			width: 100%;
			background: url("/static/img/new/image.png") no-repeat;
			background-position: 8vw 3vh;
			// margin-left: 80rpx;
		}

		background-color: #0b6fe9;
		// background-size: cover;
		height: 50vh;
		width: 100%;

		.box {
			width: 90%;
			margin: 13vh auto 0;
			display: flex;
			flex-direction: column;

			// margin-top: 30px;
			.round {
				position: relative;
				width: 100vw;
				height: 141px;
				left: -10%;
				top: -150px;
			}

			.round2 {
				position: relative;
				width: 100vw;
				height: 141px;
				left: -10%;
				top: -260px;
			}

			.line {
				height: 1px;
				width: 40px;
				position: relative;
				top: -275px;
				left: 5px;
			}
		}

		.logo {
			width: 106px;
			height: 43px;
			margin-bottom: 20px;
		}

		.title {
			// width: 191px;
			// height: 31px;
			font-family: "Microsoft YaHei";
			font-size: 28px;
			font-family: Mic;
			font-weight: bold;
			color: #ffffff;
			letter-spacing: 0em;
		}
	}

	.bottom {
		background: url("/static/img/new/Nipic_6699049_20190920151412375000.png") no-repeat;
		background-size: cover;
		height: 50vh;
		width: 100%;

		.box {
			height: 100%;
			background: url("/static/img/new/9.png") no-repeat;
			background-size: cover;
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			align-items: center;
		}
	}

	.more {
		width: 20px;
		height: 20px;
		z-index: 99999;
	}

	.content {
		overflow: hidden;
		background-color: #0b6fe9;
		height: 100vh;
		padding-bottom: 0px;
	}

	.app-title {
		background: transparent !important;
	}

	.login {
		position: absolute;
		top: 35vh;
		left: 10%;
		width: 80%;
		margin: 0 auto;
		padding-top: 46px;
	}

	.login>.logo {
		width: 100%;
		height: 204px;
		margin-bottom: 40px;
	}

	.login>.logo2 {
		width: 40%;
		height: 40px;
		margin-bottom: 40px;
	}

	.login>.login-input {
		width: 100%;
		height: 48px;
		color: #000000;
		padding: 0 16px;
		border-radius: 30px;
		background: #fff;
		margin-bottom: 20px;
	}

	.login>.forget {
		line-height: 20px;
		color: #307be0;
		font-size: 14px;
		margin-bottom: 48px;
	}

	.login>.default-btn {
		line-height: 48px;
		font-size: 18px;
		margin-bottom: 10px;
	}
</style>